<template>
	<!-- 消息 -->
	<view>
		<view class="container">
			<view class="header pos-rel">
				<scroll-view
					class="tab-bar bac-color-fff pos-fixed"
					style="top:0;left:0;z-index:999"
					:scroll="false"
					:scroll-x="true"
					:show-scrollbar="false"
					v-if="tab_list"
				>
					<view class="flex-column align-end">
						<view class="flex-row pad-10">
							<view
								class="uni-tab-item"
								v-for="(item,index) in tab_list"
								:key="index"
								@click="setIndex(index)"
							>
								<text class="uni-tab-item-title" :class="{active:index==tab_index}">{{item.name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="mar-t-50">
			<clear-line :height="10" :bacColor="'#F4F5FA'"></clear-line>
			<view class="chat-list" v-if="tab_index == 0">
				<block v-if="tab_list[tab_index].all_list.length && tab_list[tab_index].type=='msg'">
					<navigator  :url="'/pages/chat/index?session_id='+item.id" hover-class="none" class="chat-list-item flex border-b-1 mar-b-10" v-for="(item,index) in tab_list[tab_index].all_list" :key="index">
						<view class=" pos-rel">
							<image class="user-avatar" :src="item.counselor_avatar">
							</image>
							<view class="pos-abs unread-count" v-if="item.unread_count>0">
								<text class=""></text>
							</view>
						</view>
						<view class="flex-1 mar-l-10 pad-t-5" >
							<view class="font-size-16 "><text>{{item.counselor_name}}</text></view>
							<view class="mar-t-3 font-color-A7AABB tq-text-line1" v-if="item.record ">
								<text>{{item.record.message}}</text>
							</view>
						</view>
						<view class="font-color-A7AABB pad-t-5">
							<text>{{transformTime(item.create_time)}}</text>
						</view>
					</navigator>
				</block>
				<no-more v-if="tab_list[0].all_list.length<=0&&tab_index==0"></no-more>
			</view>
			<notice-list v-else :rang="tab_list[1].all_list"></notice-list>
			<no-more v-if="tab_list[1].all_list.length<=0&&tab_index==1"></no-more>
		</view>
	</view>
</template>

<script>
import {userHistorySession,getNotices} from '@/utils/http'
import noticeList from  '@/components/notice-list'
export default {
	data() {
		return {
			tab_list:[
			{
				name: '咨询消息',
				type: 'msg',
				status: '',
				index_page: 0,
				total_page: 1,
				all_list: []
			},
			{
				name: '系统通知',
				type: 'consult',
				index_page: 0,
				total_page: 1,
				status: '',
				all_list: []
			}
		],
			tab_index: 0
		}
	},
	components:{
		noticeList
	},
	watch: {
		leave_msg (newVal, oldVal) {
			this.tab_list[0].all_list.forEach(item => {
				if(newVal[item.id]){
					item.unread_count = 1;
					item.record = [newVal[item.id]]
				}else{
					// this.tab_list[0].all_list.unshift({
					// 	'counselor_avatar':newVal[item.id].avatar,
					// 	'counselor_name' :newVal[item.id].nickname,
					// 	'id'			:newVal[item.id].session_id,
					// 	'record'	    :[newVal[item.id]],
					// 	'unread_count'  :1,
					// })
				}
			});
			//do something
		}
	},
	computed: {
		leave_msg(){
			return this.$store.state.leave_msg
		}
	
	},
	methods: {
		setIndex(i) {
			this.tab_index = i
			const current_tab = this.tab_list[this.tab_index]
			if(i==1){
				if (current_tab.index_page == 0) {
					this.getNotices()
				}
			}
			
		},
		init() {
			this.tab_list = [
				{
					name: '咨询消息',
					type: 'msg',
					status: '',
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '系统通知',
					type: 'consult',
					index_page: 0,
					total_page: 1,
					status: '',
					all_list: []
				}
			]
			this.tab_index = 0
		},
		getUserSession(){
			let current_tab = this.tab_list[this.tab_index]
			userHistorySession({page: current_tab.index_page + 1}).then(res=>{
				if(res && res.data){
					current_tab.index_page = res.current_page;
					current_tab.total_page = res.last_page;
					 res.data.forEach(item=>{
						
						if(this.leave_msg && this.leave_msg[item.id]){
							item.unread_count++;
						}
					})
					console.log(res.data);
					current_tab.all_list = [...res.data,...current_tab.all_list];
				}
				
			});
		},
		getNotices(){
			let current_tab = this.tab_list[this.tab_index]
			getNotices({page: current_tab.index_page + 1}).then(res=>{
				if(res){
					current_tab.index_page = res.current_page;
					current_tab.total_page = res.total_page;
					current_tab.all_list = [...current_tab.all_list,...res.data];
				}
				
			})
		}
	},
	//上拉加载
	onReachBottom(){
		let current_tab = this.tab_list[this.tab_index]
		if(current_tab.index_page < current_tab.total_page){
			if(this.tab_index == 0){
				this.getUserSession();
			}else{
				this.getNotices();
			}
		}
	},
	onShow() {
		this.init()
		this.getUserSession();
	}
}
</script>

<style scoped>
.tab-bar {
	/* #ifdef APP-PLUS */
	width: 750rpx;
	/* #endif */
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
/* #ifndef APP-NVUE */
.tab-bar ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */
.tab-bar-line {
	height: 1px;
	background-color: #cccccc;
}

.uni-tab-item {
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	/* padding-left: 10px;
	padding-right: 10px; */
	padding: 13px 20px;
}

.uni-tab-item-title {
	color: #555;
	font-size: 15px;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.uni-tab-item .active {
	color: #0088ff !important;
	font-size: 16px;
	font-weight: 600;
	/* border-bottom: 3px solid #0088ff; */
	padding-bottom: 3px;
}
.chat-list{
	padding: 10px;
}
.user-avatar{
	height: 55px;
	width: 55px;
	
}
.unread-count{
	height: 10px;
	width: 10px;
	top: 0;
	right: 0;
	transform: translate(0,-2px);
	border-radius: 100%;
	background-color: rgb(231, 19, 19);
	color: #fff;
}


</style>